setPage(); 
$('.container').click(function (e) {
    // 获取 localStorage 中 数据 
    let cart = JSON.parse(localStorage.cart);

    // 点击的是 全选标签 
    if ($(e.target).attr('name') === 'all') {
        // 让 localStorage 中 购买状态 和 全选标签相同
        for (let i = 0; i <= cart.length - 1; i++) {
            cart[i].buy = $(e.target).prop('checked');
        }

        // 点击的是 其他 input复选框
    } else if ($(e.target).attr('name') === 'other') {

        // 循环遍历 购物车数组 
        for (let i = 0; i <= cart.length - 1; i++) {
            // 购物车数组goods_id 和 点击标签存储的goods_id 相同 
            if (cart[i].goods_id === $(e.target).attr('goods_id')) {
                // 修改 buy 属性 存储的 购买状态
                cart[i].buy = $(e.target).prop('checked');

                // break 终止循环
                break;
            }

        }


        // 点击的是 - 减按钮
    } else if ($(e.target).attr('name') === '-') {

        // 循环遍历 购物车数组 
        for (let i = 0; i <= cart.length - 1; i++) {
            // 购物车数组goods_id 和 点击标签存储的goods_id 相同 
            if (cart[i].goods_id === $(e.target).attr('goods_id')) {

                // 购买数量 累减 1
                cart[i].num--;

                // break 终止循环
                break;
            }

        }

        // 点击的是 + 减按钮
    } else if ($(e.target).attr('name') === '+') {

        // 循环遍历 购物车数组 
        for (let i = 0; i <= cart.length - 1; i++) {
            // 购物车数组goods_id 和 点击标签存储的goods_id 相同 
            if (cart[i].goods_id === $(e.target).attr('goods_id')) {

                // 购买数量 累加 1
                cart[i].num++;

                // break 终止循环
                break;
            }

        }

        // 点击的是 删除按钮
    } else if ($(e.target).attr('name') === 'del') {

        // 循环遍历 购物车数组 
        for (let i = 0; i <= cart.length - 1; i++) {
            // 购物车数组goods_id 和 点击标签存储的goods_id 相同 
            if (cart[i].goods_id === $(e.target).attr('goods_id')) {

                // 删除数组中当前数据单元
                cart.splice(i, 1);

                // break 终止循环
                break;
            }

        }
    }


    // 将新的数组 设定给 localStorage.cart
    localStorage.cart = JSON.stringify(cart);

    // 根据 localStorage.cart 中的数据 再次动态渲染生成页面
    setPage();

})

function setPage(){
    let flag = true;
    // 购买商品种类
    let type = 0;
    // 购买商品数量
    let number = 0;
    // 购买商品总价
    let pay = 0;

    let cart = localStorage.cart;
    cart = JSON.parse(cart);
    console.log(cart);
    if(cart === undefined){
        $('.container').html('<h1>您是第一次购物 还没有创建购物车</h1>');
    }else{
        if(cart.lenght === 0){
            $('.container').html('<h1>购物车里空空如也</h1>');
        }else{
            let str = `
            <div class="panel panel-info ">
              <div class="panel-body bg-info">
                <div class="checkbox">
                  <label>
                    <input name="all" type="checkbox" value="">
                    全选
                  </label>
                </div>
              </div>
              <div class="panel-footer">
                <ul class="cart-list">
          
          `;
          cart.forEach(element => {
              if(element.buy === false){
                  flag = false;

              }else{
                type++;
                number += element.num;
                pay += element.num * element.goods_price;
              }
              str += `
          <li class="cart-item">
            <div class="left">
              <input name="other" goods_id="${element.goods_id}" type="checkbox" ${element.buy ? 'checked' : ''}>
            </div>
            <div class="right">
              <div class="media">
                <div class="media-left">
                  <a href="#">
                    <img class="media-object" src="${element.goods_small_logo}" alt="...">
                  </a>
                </div>
                <div class="media-body">
                  <h4 class="media-heading">${element.goods_name}</h4>
                  <p>
                    <i class="glyphicon glyphicon-yen"></i>
                    <span>${element.goods_price}</span>
                  </p>
                  <div class="btn-group pull-right" role="group" aria-label="...">
                    <button name="-" goods_id=${element.goods_id} type="button" class="btn btn-default" ${element.num === 1 ? 'disabled' : ''}>-</button>
                    <button type="button" class="btn btn-default" disabled>${element.num}</button>
                    <button name="+" goods_id=${element.goods_id} type="button" class="btn btn-default" ${element.num === Number(element.goods_number) ? 'disabled' : ''}>+</button>
                  </div>
                  <button name="del" goods_id=${element.goods_id} class="del btn btn-danger">我不要了</button>

                </div>
              </div>
            </div>
          </li>
        
        `;
          });
          str += `
          </ul>
            <div>
              <h1>您一共购买${type}种商品</h1>
              <h1>您一共购买${number}件商品</h1>
              <h1>您一共需要支付${pay.toFixed(2)}元</h1>
            </div>
          </div>
        </div>
      `;
    //   console.log(str);
      $('.container').html(str);
        }
        $('[name="all"]').prop('checked', flag);
    }














    // <div class="panel panel-info ">
    // <div class="panel-body bg-info">
    //   <div class="checkbox">
    //     <label>
    //       <input type="checkbox" value="">
    //       全选
    //     </label>
    //   </div>
    // </div>
    // <div class="panel-footer">

    // </div>
    // </div>








    // <div class="panel panel-info ">
    //     <div class="panel-body bg-info">
    //       <div class="checkbox">
    //         <label>
    //           <input type="checkbox" value="">
    //           全选
    //         </label>
    //       </div>
    //     </div>
    //     <div class="panel-footer">
    //       <ul class="cart-list">
            
    //         <li class="cart-item">
    //             <div class="left">
    //               <input type="checkbox">
    //             </div>
    //             <div class="right">
    //               <div class="media">
    //                 <div class="media-left">
    //                   <a href="#">
    //                     <img class="media-object" src="https://g-search3.alicdn.com/img/bao/uploaded/i4/i3/2898933862/O1CN01ExuNHp1eOq9TKoRh6_!!2898933862.jpg_580x580Q90.jpg_.webp" alt="...">
    //                   </a>
    //                 </div>
    //                 <div class="media-body">
    //                   <h4 class="media-heading">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</h4>
    //                   <p>
    //                     <i class="glyphicon glyphicon-yen"></i>
    //                     <span>1234.56</span>
    //                   </p>
    //                   <div class="btn-group pull-right" role="group" aria-label="...">
    //                     <button type="button" class="btn btn-default">-</button>
    //                     <button type="button" class="btn btn-default" disabled>1</button>
    //                     <button type="button" class="btn btn-default">+</button>
    //                   </div>
    //                   <button class="del btn btn-danger">我不要了</button>
}